<template>
  <div class="q-pa-md" style="max-width: 350px">
    <t-list bordered padding>
      <t-item-label header>User Controls</t-item-label>

      <t-item clickable v-ripple>
        <t-item-section>
          <t-item-label>Content filtering</t-item-label>
          <t-item-label caption>
            Set the content filtering level to restrict apps that can be
            downloaded
          </t-item-label>
        </t-item-section>
      </t-item>

      <t-item clickable v-ripple>
        <t-item-section>
          <t-item-label>Password</t-item-label>
          <t-item-label caption>
            Require password for purchase or use password to restrict purchase
          </t-item-label>
        </t-item-section>
      </t-item>

      <t-separator spaced />
      <t-item-label header>General</t-item-label>

      <t-item tag="label" v-ripple>
        <t-item-section side top>
          <t-checkbox v-model="check1" />
        </t-item-section>

        <t-item-section>
          <t-item-label>Notifications</t-item-label>
          <t-item-label caption>
            Notify me about updates to apps or games that I downloaded
          </t-item-label>
        </t-item-section>
      </t-item>

      <t-item tag="label" v-ripple>
        <t-item-section side top>
          <t-checkbox v-model="check2" />
        </t-item-section>

        <t-item-section>
          <t-item-label>Sound</t-item-label>
          <t-item-label caption>
            Auto-update apps at anytime. Data charges may apply
          </t-item-label>
        </t-item-section>
      </t-item>

      <t-item tag="label" v-ripple>
        <t-item-section side top>
          <t-checkbox v-model="check3" />
        </t-item-section>

        <t-item-section>
          <t-item-label>Auto-add widgets</t-item-label>
          <t-item-label caption>
            Automatically add home screen widgets
          </t-item-label>
        </t-item-section>
      </t-item>

      <t-separator spaced />
      <t-item-label header>Notifications</t-item-label>

      <t-item tag="label" v-ripple>
        <t-item-section>
          <t-item-label>Battery too low</t-item-label>
        </t-item-section>
        <t-item-section side>
          <t-toggle color="blue" v-model="notif1" val="battery" />
        </t-item-section>
      </t-item>

      <t-item tag="label" v-ripple>
        <t-item-section>
          <t-item-label>Friend request</t-item-label>
          <t-item-label caption>Allow notification</t-item-label>
        </t-item-section>
        <t-item-section side top>
          <t-toggle color="green" v-model="notif2" val="friend" />
        </t-item-section>
      </t-item>

      <t-item tag="label" v-ripple>
        <t-item-section>
          <t-item-label>Picture uploaded</t-item-label>
          <t-item-label caption
            >Allow notification when uploading images</t-item-label
          >
        </t-item-section>
        <t-item-section side top>
          <t-toggle color="red" v-model="notif3" val="picture" />
        </t-item-section>
      </t-item>

      <t-separator spaced />
      <t-item-label header>Other settings</t-item-label>

      <t-item>
        <t-item-section side>
          <t-icon color="teal" name="volume_down" />
        </t-item-section>
        <t-item-section>
          <t-slider v-model="volume" :min="0" :max="10" label color="teal" />
        </t-item-section>
        <t-item-section side>
          <t-icon color="teal" name="volume_up" />
        </t-item-section>
      </t-item>

      <t-item>
        <t-item-section side>
          <t-icon color="deep-orange" name="brightness_medium" />
        </t-item-section>
        <t-item-section>
          <t-slider
            v-model="brightness"
            :min="0"
            :max="10"
            label
            color="deep-orange"
          />
        </t-item-section>
      </t-item>

      <t-item>
        <t-item-section side>
          <t-icon color="primary" name="mic" />
        </t-item-section>
        <t-item-section>
          <t-slider v-model="mic" :min="0" :max="50" label />
        </t-item-section>
      </t-item>
    </t-list>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        check1: ref(true),
        check2: ref(false),
        check3: ref(false),

        notif1: ref(true),
        notif2: ref(true),
        notif3: ref(false),

        volume: ref(6),
        brightness: ref(3),
        mic: ref(8),
      };
    },
  };
</script>
